<template>
  <div class="item1">
    <div class="breadcrumb">{{$t('basic.reason_configuration')}}</div>
    <div class="content">

      <div class="left">
        <div class="title"> {{$t('basic.reason_type')}} </div>
        <el-form ref="form" :model="formData" label-width="0" size="mini">
          <el-row :gutter="24">
            <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" style="padding-top:10px">
              <el-form-item label-position="left" style="margin-bottom:5px">
                <el-input v-model="formData.keyword" clearable placeholder="" class="search">
                  <template slot="append">
                    <el-button type="primary" size="small" @click="handleSearch">{{ $t("common.query") }}</el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>

            <div class="btngroup">
              <el-button type="primary" size="mini" @click="handleAdd()">{{ $t("common.add") }}</el-button>
              <el-button type="primary" size="mini" @click="handleEdit()">{{ $t("common.edit") }}</el-button>
              <el-button type="primary" size="mini" @click="handleDel()">{{ $t("common.remove") }}</el-button>
            </div>

          </el-row>
        </el-form>

        <div class="tableAuto">
          <el-table :data="tableData" :height="height" style="width:100%;margin-top:10px;" stripe
            :header-cell-style="{background:'#EAEBEC'}" v-loading="tableLoading" @row-click="rowClick" ref="refTable" highlight-current-row>
            <el-table-column label="" width="50" align="center">
              <template slot-scope="scope">
                <div>
                  <el-radio :label="scope.row.fid" v-model="radioId">&nbsp;</el-radio>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="reasGrpDesc" width="" show-overflow-tooltip label=""></el-table-column>
          </el-table>
        </div>
        <div class="pagination-area">
          <el-pagination @current-change="handleCurrentChange" :page-size="pager.pageSize" :current-page="pager.pageNum"
            layout="prev, pager, next" :total="pager.total">
          </el-pagination>
        </div>
      </div>
      <div class="right">
        <form1 :phaseData="currObj" v-if="isShowForm" :parentFid="radioId">
        </form1>
      </div>
    </div>

    <el-dialog v-dialogDrag :title="title == 1 ? $t('common.add') : $t('common.edit')" :visible.sync="isShowDialog"
      :close-on-click-modal="false" :width="screenWidth > 1024 ? '30%' : '50%'" class="isShowDialog" :before-close="handleClose">
      <el-form :model="ruleForm" label-width="85px" ref="ruleForm" size="small" :rules="rules" :hide-required-asterisk="true">
        <el-row :gutter="35">
          <el-col :xs="24">
            <el-form-item :label="$t('basic.reason_type')" prop="reasGrpDesc">
              <el-input v-model="ruleForm.reasGrpDesc" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24">
                        <el-form-item label="组类型" prop="reasGrpType">
                            <el-input v-model="ruleForm.reasGrpType" placeholder="" clearable ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24">
                        <el-form-item label="显示顺序" prop="displaySeq">
                            <el-input-number v-model="ruleForm.displaySeq" :min="1" ></el-input-number>
                        </el-form-item>
                    </el-col> -->
          <el-col :xs="24">
            <el-form-item :label="$t('basic.remarks')" prop="flastModifyComment">
              <el-input type="textarea" v-model="ruleForm.flastModifyComment" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handleCreateReas('ruleForm')"
          :loading="loading">{{ $t("common.preservation") }}</el-button>
        <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { configure } from "@/api/configure"
import form1 from './template/formReason.vue'
export default {
  components: {
    form1,

  },
  data () {
    return {
      screenWidth: document.body.clientWidth,
      height: document.body.offsetHeight - 310,
      formData: {
        keyword: ""
      },
      icon: "icon-biaoge",
      loading: false,
      tableLoading: false,
      isCard: false,
      radioId: "",
      tableData: [],
      cardIndex: -1,
      pager: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
        field: '',
        order: '',
      },
      title: "1",
      isShowDialog: false,
      ruleForm: {
        reasGrpDesc: "", //原因组描述
        reasGrpType: "", //组类型
        displaySeq: 1, //显示顺序
        flastModifyComment: "", //更新描述
      },
      rules: {
        reasGrpDesc: [{ required: true, message: '原因组不能为空', trigger: 'blur' }],
        reasGrpType: [{ required: true, message: '组类型不能为空', trigger: 'blur' }],
        displaySeq: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }],
      },
      isShowForm: false,
      currObj: {},
    }
  },
  created () {
    this.getReasGroupList()
  },
  methods: {
    handleSearch () {
      this.pager.pageNum = 1
      this.getReasGroupList()
    },
    getReasGroupList () {
      const param = {
        reasGrpDesc: this.formData.keyword,
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        field: this.pager.field,
        order: this.pager.order,
      }
      this.tableLoading = true
      configure.getReasGroupList(param).then(res => {
        this.tableLoading = false
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.pager.total = res.data.total
          this.currObj = res.data.rows[0]
          this.isShowForm = true
          this.radioId = res.data.rows[0]?.fid
        }
      })
    },
    rowClick (row) {
      this.radioId = row.fid;
      this.currObj = row;
      // this.$refs.singleTable.setCurrentRow(row);
      this.isShowForm = true
    },
    changePattern () {
      this.isCard = !this.isCard
      this.radioId = ''
      this.cardIndex = -1
      this.icon = this.isCard ? 'icon-qiehuan' : 'icon-biaoge'
    },
    handleIndex (index, row) {
      this.cardIndex = index
      this.radioId = row.fid;
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.pager.field = column.prop
        this.pager.order = 'DESC'
      } else {
        this.pager.field = column.prop
        this.pager.order = 'ASC'
      }
      this.pager.pageNum = 1
    },
    handleSizeChange (val) {
      this.pager.pageNum = 1
      this.pager.pageSize = val
      this.getReasGroupList()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.getReasGroupList()
    },
    handleAdd () {
      this.title = "1"
      this.ruleForm = {}
      try {
        this.$refs['ruleForm'].resetFields();
      } catch (e) { }
      this.isShowDialog = true
    },
    handleEdit () {
      if (this.radioId === '') {
        this.$message.error('请选择要修改的数据');
        return
      }
      this.title = "2"
      let copyRow = this.tableData.find(item => item.fid == this.radioId)
      this.ruleForm = Object.assign({}, copyRow)
      this.isShowDialog = true
    },
    handleDel () {
      if (this.radioId === '') {
        this.$message.error('请选择要删除的数据');
        return
      }
      let that = this
      this.$customConfirm({
        content: "请确认是否删除原因" + this.currObj.reasGrpDesc,
        onok () {
          configure.removeGroupReas(that.radioId).then(res1 => {
            if (res1.code == 200) {
              that.radioId = ""
              that.cardIndex = -1
              that.getReasGroupList()
              that.$message({ duration: 1000, type: 'success', message: '删除成功!' });
            } else {
              that.$message.error(res1.msg);
            }
          })
        }
      });
    },
    handleCreateReas (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            ...this.ruleForm
          }
          this.loading = true
          configure.reasGroupAdd(param, this.title).then(res => {
            this.loading = false
            if (res.code == 200) {
              this.$refs[formName].resetFields();
              this.isShowDialog = false
              this.getReasGroupList()
            } else {
              this.$message.error(res.msg);
            }
          })
        } else {
          return false
        }
      })
    },
    handleClose () {
      this.isShowDialog = false
    },
    table_index (index) {
      return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
  }
}
</script>
<style scoped>
.search >>> .el-input-group__append,
.search >>> .el-input-group__prepend {
  background: #00a09d;
  color: #fff;
  border: 1px solid #00a09d;
}
.tableAuto {
  width: auto !important;
}
.tableAuto >>> .el-table__row {
  background: none !important;
}
.tableAuto >>> .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: none;
}
.tableAuto >>> .el-table__row td {
  padding: 8px 0;
}
.tableAuto >>> .el-table thead {
  display: none;
}
.pagination-area {
  padding-top: 0px;
}
.btngroup {
  margin-left: 12px;
}
.btngroup >>> .el-button--mini {
  padding: 7px 12px;
  font-size: 12px;
  /* transform:scale(0.8);
        margin: 0; */
}

.content {
  display: flex;
  height: 100%;
  padding-top: 10px;
  clear: both;
}
.content .left {
  width: 200px;
  border-right: 1px solid #e4e4e4;
  height: 100%;
}
.content .right {
  flex: 1;
  padding-left: 15px;
}

.contentleft {
  width: 13.5rem;
  border-right: 1px solid #e4e4e4;
  height: 100%;
}

.title {
  line-height: 35px;
  background: #3b2e58;
  color: #fff;
  padding: 0 15px;
  font-size: 14px;
  margin-bottom: 10px;
}

.item1 .breadcrumb {
  height: 38px;
  line-height: 38px;
  font-weight: blod;
  font-size: 18px;
}
</style>